<template>
  <div>
    <ol>
      <li :style="{opacity}">欢迎学习Vue</li>
        <li>学习<input type="text"></li>
        <li>约会<input type="text"></li>
        <li>玩游戏<input type="text"></li>
    </ol>
  </div>
</template>

<script>
export default {
name:'News',
data(){
  return {
    opacity:1
  }
},
/* beforeDestroy(){
  console.log("News组件即将被销毁了");
  clearInterval(this.timer)
}, */
/* mounted(){
  this.timer= setInterval(() => {
    console.log('@');
    this.opacity-=0.01
    if(this.opacity<=0)this.opacity=1
  }, 16);
} */
activated(){
console.log('News组件被激活了');
this.timer= setInterval(() => {
    console.log('@');
    this.opacity-=0.01
    if(this.opacity<=0)this.opacity=1
  }, 16);
},
deactivated(){
console.log('News组件失活了');
clearInterval(this.timer)
}
}
</script>

<style>

</style>